﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>前台用户列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#userlist').datagrid({
      				title:'前台用户列表',  
      				iconCls:'icon-save',
                    queryParams:{
                        "name": null,
                        "phone": null,
                        "wechat": null,
                        "qq": null,
                        "type": -1,
                        "companyid": null
                    },
                    url:"/manager/user/findAll",
      				columns:[
                          [
                					       {field:'name',title:'姓名',width:100,align:'center'},  
                					       {field:'phone',title:'电话',width:100,align:'center'},  
                					       {field:'wechat',title:'微信号',width:100,align:'center'},
                                 {field:'qq',title:'QQ',width:200,align:'center'},
                                 {field:'commpanyname',title:'所属服务商',width:100,align:'center',formatter:function (val, row){
                                        if(row.serverCompany != null){
                                            return row.serverCompany.name;
                                        }else{
                                            return "-"
                                        }
                                     }},
                                 {field:'commpanytype',title:'服务商类型',width:100,align:'center',formatter:function (val, row){
                                         if(row.serverCompany != null){
                                             if(row.serverCompany.type === 1){
                                                 return "生活"
                                             }else if(row.serverCompany.type === 2){
                                                 return "商务"
                                             }
                                         }else{
                                             return "-"
                                         }
                                     }},
                                 {field:'flag',title:'状态',width:100,align:'center',formatter:function (val,row){
                                        return val === 1?"启用":"禁用";
                                     }},
                                 {field:'cz',title:'操作',width:200,align:'center',formatter:function(val,row){
                                       return "<a href='javascript:showDg();'>查看</a>";
                                 }}
                          ]
                    ],
      				toolbar: "#tooldiv",  
      				pagination: true,
      				singleSelect:true
			});


          
          //初始化修改窗口  
         $('#dg').dialog({
			    title: '用户详情',
			    width: 700,
			    height: 700,
			    closed: true,
			    cache: false,
			    modal: true,
			    iconCls: 'icon-save'
			});

         //初始化查询按钮
         $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                const tooldiv = document.getElementById('tooldiv');
                const inputs = tooldiv.querySelectorAll('input[type="text"]');
                const select = tooldiv.querySelector('select');
                var pager = $('#userlist').datagrid('getPager');
                // 直接设置数据网格的查询参数
                var queryParams = {
                    "page": 1,
                    "name": inputs[0].value,
                    "phone": inputs[1].value,
                    "wechat": inputs[2].value,
                    "qq": inputs[3] ? inputs[3].value : "",
                    "type": select.value,
                    "companyid": null
                };
                $('#userlist').datagrid('options').queryParams = queryParams;
                $('#userlist').datagrid('reload');
                pager.pagination('refresh', {
                    pageNumber: 1
                });
            });
            
	   });

        //查询弹出方法
       function showDg(){
           var selectedRow = $('#userlist').datagrid('getSelected');
           $.ajax({
               dataType: "json",
               url: "/manager/user/findById",
               data: {"id":selectedRow.id},
               success: function (result) {
                   if (result.status == 200) {
                       $('#dg').dialog("open");
                       var createdate = new Date(result.data.createdate);
                       var year = createdate.getFullYear();
                       var month = ('' + (createdate.getMonth() + 1)).slice(-2);
                       var day = ('' + createdate.getDate()).slice(-2);
                       var formattedDate = year + '-' + month + '-' + day;
                       var type;
                       var name;
                       if (result.data.serverCompany != null) {
                           name = result.data.serverCompany.name;
                           if (result.data.serverCompany.type === 1) {
                               type = "生活"
                           } else if (result.data.serverCompany.type === 2) {
                               type = "商务"
                           }
                       }else{
                           type = "-";
                           name = "-";
                       }
                       $("#dg input.easyui-textbox:eq(0)").textbox("setValue", result.data.name);
                       $("#dg input.easyui-textbox:eq(1)").textbox("setValue", result.data.nickname);
                       $("#dg input.easyui-textbox:eq(2)").textbox("setValue", result.data.phone);
                       $("#dg input.easyui-textbox:eq(3)").textbox("setValue", result.data.wechat);
                       $("#dg input.easyui-textbox:eq(4)").textbox("setValue", result.data.qq);
                       $("#dg input.easyui-textbox:eq(5)").textbox("setValue", name);
                       $("#dg input.easyui-textbox:eq(6)").textbox("setValue", type);
                       $("#dg input.easyui-textbox:eq(7)").textbox("setValue", result.data.sex === 1?"男":"女");
                       $("#dg input.easyui-textbox:eq(8)").textbox("setValue", formattedDate);
                       $("#dg input.easyui-textbox:eq(9)").textbox("setValue", result.data.flag=== 1?"启用":"禁用");
                       $('#dg img').attr('src', result.data.imageUrl);
                   }
               },
               error: function (xhr, status, error) {
                   alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
               }
           });
       }

       //禁用操作
       function disabledStatus(){
           var selectedRow = $("#userlist").datagrid('getSelected');
           if(selectedRow){
               var index = $("#userlist").datagrid('getRowIndex', selectedRow); // 获取行的索引
               if (selectedRow.flag === 1){
                   $("#userlist").datagrid('updateRow', {
                       index: index,
                       row: {
                           flag: 0,
                       }
                   });
                   $.ajax({
                       dataType: "json",
                       url: "/manager/user/modifyStatus",
                       data: {"id":selectedRow.id},
                       success: function (result) {

                       },
                       error: function (xhr, status, error) {
                           alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                       }
                   });
               }
           }

       }

       //启用操作
       function enabledStatus(){
           var selectedRow = $("#userlist").datagrid('getSelected');
           if(selectedRow){
               var index = $("#userlist").datagrid('getRowIndex', selectedRow); // 获取行的索引
               if (selectedRow.flag === 0){
                   $("#userlist").datagrid('updateRow', {
                       index: index,
                       row: {
                           flag: 1,
                       }
                   });
                   $.ajax({
                       dataType: "json",
                       url: "/manager/user/modifyStatus",
                       data: {"id":selectedRow.id},
                       success: function (result) {

                       },
                       error: function (xhr, status, error) {
                           alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                       }
                   });
               }
           }

       }
	</script>
</head>
<body>
  <div id="tooldiv">
      <input type="text"  placeholder="请输入查询用户名"/>
      <input type="text"  placeholder="请输入查询电话"/>
      <input type="text"  placeholder="请输入查询微信"/>
      <input type="text"  placeholder="请输入查询QQ"/>
      <select>
          <option value="-1">请选用户类型</option>
          <option value="0">普通用户</option>
          <option value="1">生活服务商</option>
          <option value="2">商务服务商</option>
      </select>
      <a id="submit_search">搜索</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-remove'" href="javascript:disabledStatus();">禁用</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="javascript:enabledStatus();">启用</a>
  </div>
  <table id="userlist"></table>
    <div id="dg">
           <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
             <img src="./images/tx.jpg" alt="" style="width: 150px; height:150px;" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'姓名:'" readonly="true" value="张三" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'昵称:'" readonly="true" value="服务商员工1"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'电话:'" readonly="true" value="123456"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'微信号:'" readonly="true" value="11111111111"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'QQ:'" readonly="true" value="2222222222"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'所属服务商:'" readonly="true" value="全能家政服务" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商类型:'" readonly="true" value="VIP2"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'性别:'" readonly="true" value="男"/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'注册时间:'" readonly="true" value="2021-1-1"/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'状态:'" readonly="true" value="启用"/>
            </div> 
        </div>
   </div>
</body>
</html>